<div class="row span8" id="reporteForm" data-bind="">
	<div class="span8 well" data-bind="visible: mostrarForm">
		<h4>Listado de Clientes que superaron la c&aacute;pita</h4>
		<hr>
		<table width="100%" id="filtros">
			<tr>
				<td><label class="span2 label" for="inputDesde">Desde:</label></td>
				<td><input class="input-small" id="inputDesde" data-bind="value: desde" /></td>
				<td><label class="span2 label" for="inputHasta">Hasta:</label></td>
				<td><input class="input-small" id="inputHasta" data-bind="value: hasta" /></td>
			</tr>			
			<tr>
				<td colspan="3" align="right"><button class="btn btn-primary" data-bind="click: generar">Generar reporte</button></td>
			</tr>
		</table>
	</div>
	<div class="span8 well" data-bind="visible: mostrarReporte" style="display:none ">
		<table class="table table-striped table-bordered">
			<thead data-bind="visible: !generando()">
				<tr>
					<th>Cliente</th>
					<th>Detalle</th>
					<th>Contrat&oacute;</th>
					<th>Us&oacute;</th>
				</tr>
			</thead>
			<tbody data-bind="visible: generando">
				<tr>
					<td colspan="5"><span class="label label-info">Generando...</span></td>
				</tr>
			</tbody>
			<tbody data-bind="visible: !generando(), foreach: datos">
				<tr>
					<td data-bind="text: cliente"></td>
					<td data-bind="text: detalle"></td>
					<td data-bind="text: contrato"></td>
					<td data-bind="text: uso"></td>
				</tr>
			</tbody>
			<tfoot data-bind="visible: !generando()">
				<tr>
					<td class="alert alert-info" colspan="4">Total de Clientes: <span data-bind="text: datos().length"></span></td>
				</tr>
			</tfoot>
			<tfoot data-bind="visible: !generando() && datos().length > 0">
				<tr>
					<td colspan="4">
						<a class="btn" data-bind="click: descarga">Descarga CSV</a>
					</td>
				</tr>
			</tfoot>
		</table>
		<div data-bind="visible: mostrarError" class="alert alert-error">
			<span data-bind="text: errorMensaje"></span>
		</div>
	</div>
</div>
<script language="javascript">
	function ReporteModelo() {
		var self = this;
		
		self.title = ko.observable("Reportes");
		self.mostrarForm = ko.observable(true);
		self.mostrarError = ko.observable(false);
		self.errorMensaje = ko.observable("");
		self.mostrarReporte = ko.observable(false);
		self.generando = ko.observable(true);
				
		self.datos = ko.observableArray();
		self.archivo = ko.observable();

		var nuevafecha = new Date();
		self.desde = ko.observable(nuevafecha.getDate() + "/" + (nuevafecha.getMonth()+1) + "/" + nuevafecha.getFullYear());		
		self.hasta = ko.observable(nuevafecha.getDate() + "/" + (nuevafecha.getMonth()+1) + "/" + nuevafecha.getFullYear());		

		self.carga = function() {
		};
		
		self.carga();
		
		self.generar = function() {
			self.mostrarReporte(true);
			var exito = function(data) {
				if(data.status!="OK") {
					self.mostrarError(true);
					self.generando(false);
					self.errorMensaje(data.data);
				} else {
					self.datos(data.data);
					self.archivo(data.archivo);
					self.generando(false);
				}
			};
			var error = function(data) {
				self.mostrarError(true);
				self.generando(false);
				self.errorMensaje(data.data);
			};
			var requestBody = {
				desde: self.desde(),
				hasta: self.hasta()
			};
			postData("./servidor/sterilav.php?op=reporte&reporte=4",exito,error,requestBody);
		};
		
		self.abrir = function(dato) {
			amplify.store.sessionStorage("sterilav.remitoEditado", dato.id);
			$("#container").load("./cliente/paginas/remitoEntrada.html?id=" + dato.id);
		};

		self.descarga = function() {
			window.open("servidor/"+self.archivo(),"_blank");
		};

	}
	
	var reporteModelo = new ReporteModelo();
	ko.applyBindings(reporteModelo, document.getElementById("reporteForm"));  	
</script>